<template>
  <div class="AddOrUpdate_main add_container add_container_table">
    <div class="main_main ">
      <el-form ref="form" :model="showData" :inline="true">
        <el-tabs v-model="activeName">
          <el-tab-pane v-for="(item,index) in showKey" :key="index" :label="item.name" :name="index+1+''">
            <div
              v-for="(item2,index2) in item.columns"
              :key="index2"
              :class="getClass(item2)"
            >
              <el-form-item v-if="item2.type==='form'" :label="item2.name">
                <div v-if="!showData[item2.key]&&showData[item2.key]!==0&&showData[item2.key]!=='0'" class="show noData">暂无</div>
                <div v-else class="show">{{ showData[item2.key] }}</div>
              </el-form-item>

              <div v-if="item2.type==='table'&&item2.name" class="formItem_header">
                {{ item2.name }}
              </div>
              <div v-if="item2.type==='table'" ref="table_container" class="table_container" :class="!item2.name?'padding_class':''">
                <el-table
                  ref="table"
                  :data="showData[item2.key]"
                  stripe
                  border
                  row-key="id"
                >
                  <el-table-column
                    v-for="(item3,index3) in item2.columns"
                    :key="index3"
                    :prop="item3.key"
                    :label="item3.name"
                    :min-width="item3.minWidth||100"
                    :show-overflow-tooltip="true"
                  />
                </el-table>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ShowDetail',
  props: {
    layerid: {},
    showKey: {},
    showData: {}
  },
  data() {
    return {
      pageId: '查看', // 页面唯一标识
      activeName: '1'
    }
  },
  mounted() {
  },
  methods: {
    getClass(item) {
      let res = ''
      if (item.type === 'form') {
        res += 'showItem'
        if (item.length && item.length === 'double') {
          res += ' double'
        }
      } else {
        res += 'showTable'
      }

      return res
    }
  }
}
</script>

<style lang="less" scoped>
.main_main{
  padding-top: 0px;
  .el-form{
    height: 100%;

    .showItem{
      margin-left: 20px;
      margin-right: 20px;
      width: calc(33.33% - 40px);
    }

    /deep/ .el-form-item{
      width: 100%;
      border-bottom: 1px solid #D6D6D6;
      margin: 0;
      min-height: 50px;
      padding-top: 10px;

      .el-form-item__label:before{
        content: none;
      }
      .el-form-item__label{
        color: #1F51B3;
        font-size: 15px;
      }
      .el-form-item__content{
        word-break: break-all;
        color: #333333;
        font-size: 15px;
        flex: 1;
        width: unset;
        margin-right: 0px;

        .show{
          height: fit-content !important;
        }
      }
    }
    .double{
      width: calc(100% - 40px);
      height: auto;
      /deep/ .el-form-item__content{
        height: auto;
      }
      /deep/ .el-form-item{
        height: auto;
      }

    }
    .formItem_header{
      margin-left: 0px;
      padding-left: 20px;
    }
  }
  /deep/ .el-tab-pane{
    align-content: flex-start;
  }
  .showTable{
    width: 100%;
  }
}
.padding_class{
  padding-top: 20px;
}

.noData{
  color: #c0c4cc;
}
.el-table {
  font-size: 15px;
}
/deep/ .el-table__empty-block{
  border-bottom: 1px solid #e6ebf5;
}
</style>
